<template>
  <div class="cate">
    <!-- 前往搜索 -->
    <to-search></to-search>

    <div class="con">
      <!--3.遍历 左侧 -->
      <div class="left">
        <div
          v-for="(item, index) in arr"
          :key="item.id"
          :class="index === n ? 'active' : ''"
          @click="clickleft(index)"
        >
          {{ item.catename }}
        </div>
      </div>
      <!-- 4.双for遍历右侧  -->
      <div class="right">
        <!-- 某一个  -->
        <div class="item" ref="item" v-for="item in arr" :key="item.id">
          <div class="h2">{{ item.catename }}</div>
          <div class="content">
            <!-- 6.跳转到商品列表 -->
            <div class="i" v-for="i in item.children" :key="i.id" @click="$router.push('/list?id='+i.id+'&type=2')">
              <img class="img" :src="$pre + i.img" alt="" />
              <div class="text">{{ i.catename }}</div>
            </div>
            <van-empty v-if="!item.children" description="暂无数据" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqcate } from "../../http/http";

export default {
  data() {
    return {
      // 1.初始化数据 
      arr: [],
      n: 0, //选中的下标
    };
  },
  mounted() {
    // 2.进来请求数据 
    reqcate().then((res) => {
      this.arr = res.data.list;
    });
  },
  methods: {
    // 5.实现左侧点击 
    clickleft(index) {
      // 实现了左侧的选中效果
      this.n = index;
      //  实现了右侧的滚动
      this.$refs.item[this.n].scrollIntoView({
        behavior: "smooth",
      });
    },
  },
};
</script>

<style scoped lang="less">
@import "../../less/index.less";
.cate {
  background: #f4f4f4;

  .con {
    height: calc(100vh - @headerHeight - 54px);

    display: flex;
    .left {
      width: 2rem;
      margin-right: @margin10;
      background: @white;
      font-size: @font-p;
      div {
        text-align: center;
        line-height: 0.6rem;
      }
      .active {
        color: @primary;
      }
    }
    .right {
      flex: 1;
      height: 100%;
      overflow-y: auto;
      .item {
        margin: @margin10;
        background: @white;

        .h2 {
          font-weight: bold;
          line-height: 0.6rem;
        }
        .content {
          overflow: hidden;
          .i {
            float: left;
            width: 33.33%;
            text-align: center;
            .img {
              width: 0.8rem;
              height: 0.8rem;
              border-radius: 50%;
            }
            .text {
              font-size: @font-p;
            }
          }
        }
      }
    }
  }
}
</style>